<template>
  <div class="details" v-loading="loading">
    <div class="list" v-for="(item, index) in 4" :key="index">
      <div class="headline">
        {{
          index == 0
            ? "下单信息"
            : index == 1
              ? "商品信息"
              : index == 2
                ? "收货以及发货信息"
                : index == 3
                  ? "支付以及时间信息"
                  : ""
        }}
      </div>

      <div class="parallel" v-if="index == 0">
        <div class="array" v-for="(v, j) in 5" :key="j">
          <div class="title">
            {{
              j == 0
                ? "订单号"
                : j == 1
                  ? "订单状态"
                  : j == 2
                    ? "用户昵称"
                    : j == 3
                      ? "手机号码"
                      : j == 4
                        ? "会员等级"
                        : ""
            }}：
          </div>

          <div class="text text-line" v-if="j != 1">
            {{
              j == 0
                ? detailsObj.orderNo
                : j == 1
                  ? ''
                  : j == 2
                    ? detailsObj.nickname
                    : j == 3
                      ? detailsObj.phone
                      : j == 4
                        ? detailsObj.userVipName
                        : ""
            }}

          </div>


          <div class="title" v-else>
            <el-tag v-if="detailsObj.orderStatus == 'WAIT'">待付款</el-tag>
            <el-tag v-else-if="detailsObj.orderStatus == 'PAYMENT'">已付款</el-tag>
            <el-tag v-else-if="detailsObj.orderStatus == 'CANCEL'">已取消</el-tag>
            <el-tag v-else-if="detailsObj.orderStatus == 'SEND'">待发货</el-tag>
            <el-tag v-else-if="detailsObj.orderStatus == 'START'">已发货</el-tag>
            <el-tag v-else-if="detailsObj.orderStatus == 'SIGN'">待签收</el-tag>
            <el-tag v-else-if="detailsObj.orderStatus == 'FINISH'">已签收</el-tag>
            <el-tag v-else-if="detailsObj.orderStatus == 'REJECTION'">已拒收</el-tag>
            <el-tag v-else-if="detailsObj.orderStatus == 'AFTER'">售后中</el-tag>
            <el-tag v-else-if="detailsObj.orderStatus == 'RETURN'">售后完成</el-tag>
          </div>
        </div>
      </div>

      <div class="commodity" v-if="index == 1">
        <div class="surface" v-for="(v, j) in 1" :key="j">
          <div class="left">
            <img :src="detailsObj.goodStockImage" alt="">
          </div>
          <div class="right">
            <div class="title">
              商品名称：{{ detailsObj.goodName }}
            </div>
            <div class="stock">
              规格：<el-tag>{{ detailsObj.goodStockProperty }} </el-tag> <span style="margin-left: 100px">数量：{{
                detailsObj.goodNum }}</span>
            </div>
            <div class="stock">
              商品单价：{{ detailsObj.retailPrice }}
              <span style="margin-left: 100px">商品总价：{{ detailsObj.paymentPrice }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="delivery" v-if="index == 2">
        <div class="array">收件人：{{ detailsObj.orderName }}</div>
        <div class="array">手机号码：{{ detailsObj.orderPhone }}</div>
        <div class="array">收货地址：{{ detailsObj.orderAddress }}</div>
        <div class="lint"></div>
        <div class="array">快递公司：{{ detailsObj.logisticsName }}</div>
        <div class="array">快递单号：{{ detailsObj.logisticsNo }}</div>
      </div>

      <div class="delivery" v-if="index == 3">
        <div class="array">支付方式：<el-tag>{{ detailsObj.buyType == 0 ? '余额' : detailsObj.buyType == 1 ? '微信' :
          detailsObj.buyType == 2 ? '支付宝' : detailsObj.buyType == 3 ? '混合支付': '' }}</el-tag></div>
        <div class="parallels">
          <div class="title">创建时间：{{ detailsObj.createTime }}</div>
          <div class="title">支付时间：{{ detailsObj.payTime }}</div>
          <div class="title">发货时间：{{ detailsObj.sendTime }}</div>
          <div class="title">签收时间：{{ detailsObj.finishTime }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  orderListId
} from '@/api/order'

export default {
  data() {
    return {
      id: '',
      detailsObj: {},
      loading: false

    };
  },
  created() {
    this.loading = true
    this.id = this.$route.query.id

    this.orderListIdMet()
  },
  methods: {
    orderListIdMet() {
      let params = this.id

      orderListId(params).then(res => {
        if (res.errorCode == null) {
          res.resultData.paymentPrice = Number(res.resultData.paymentPrice / 100).toFixed(2);
          res.resultData.retailPrice = Number(res.resultData.retailPrice / 100).toFixed(2);
          res.resultData.price = Number(res.resultData.price / 100).toFixed(2);
          res.resultData.realityFreight = Number(res.resultData.realityFreight / 100).toFixed(2);

          this.detailsObj = res.resultData
          this.loading = false
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
.details {
  .list {
    color: rgba(0, 0, 0, 0.7);

    .headline {
      padding: 10px;
      box-sizing: border-box;
      background: #eef5fd;
      display: flex;
      align-items: center;
      border-radius: 5px;
    }

    .parallel {
      padding: 0 10px;
      box-sizing: border-box;
      display: flex;
      height: 70px;

      .array {
        display: flex;
        align-items: center;
        width: calc(100% / 4);

        .title {
          color: rgba(0, 0, 0, 0.7);
        }

         .text {
          color: rgba(0, 0, 0, 0.7);
          width: 60%;
        }

        .img {
          width: 50px;
          height: 50px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
      }
    }

    .commodity {
      padding: 10px 10px 0;
      box-sizing: border-box;

      .surface {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;

        .left {
          width: 120px;
          height: 80px;
          margin-right: 10px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .right {
          .title {
            margin-bottom: 10px;
          }

          .stock {
            margin-bottom: 10px;
          }

          .stock:last-child {
            margin-bottom: 0;
          }
        }
      }

      .surface:last-child {
        border-bottom: 0;
      }
    }

    .delivery {
      padding: 10px 10px 0;
      box-sizing: border-box;

      .array {
        margin-bottom: 10px;
      }

      .lint {
        width: 100%;
        height: 1px;
        background: #ccc;
        margin-bottom: 10px;
      }

      .parallels {
        display: flex;

        .title {
          display: flex;
          align-items: center;
          width: calc(80% / 4);
        }
      }
    }
  }
}
</style>